<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>替换图层增加水材质Cesuim</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #cesiumContainer {
        width: 100vw;
        height: 100vh;
      }
    </style>
    <link
      rel="stylesheet"
      href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css"
    />
    <script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      console.log(`
        包依赖使用的是1.99的
        中文官网: https://www.vvpstk.com/public/Cesium/Documentation/createWorldTerrain.html
        `);
      console.log(Cesium);
      //   使用自己的密钥
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyY2RkZTQ4OS0wYzRlLTQyNmMtYmFjNy0zMzI3MWEwZmYwODIiLCJpZCI6MjMxODE5LCJpYXQiOjE3MjI0MTY0Mzh9.rRYOzcdNEqL45HmrFguJzNk2KCBb38afCpPyedi0bZ0";
      //   图层切换
      const esri = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
        enablePickFeatures: false,
      });

      //   创建地图实例
      const viewer = new Cesium.Viewer("cesiumContainer", {
        imageryProvider: esri, //自定义图层默认是谷歌影像图层
        terrainProvider: Cesium.createWorldTerrain({
          requestWaterMask: true, //水像
          //   requestVertexNormals: true,
        }),
        // baseLayerPicker: false,
      });
    </script>
  </body>
</html>
